<template>
  <div class="property-panel">
    <div class="panel-header">属性信息</div>
    <div class="panel-body">
      <el-empty v-if="!selectedItem" description="选择构件查看属性" />
      
      <div v-else class="property-content">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="ID">
            {{ selectedItem.expressID || selectedItem.id }}
          </el-descriptions-item>
          <el-descriptions-item label="名称">
            {{ selectedItem.name || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            {{ selectedItem.type || '-' }}
          </el-descriptions-item>
          
          <template v-if="selectedItem.properties">
            <el-descriptions-item
              v-for="(value, key) in selectedItem.properties"
              :key="key"
              :label="key"
            >
              {{ String(value) }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useIfcStore } from '@/store'

const store = useIfcStore()

const selectedItem = computed(() => store.selectedElement)
</script>

<style scoped>
.property-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0d1016;
}

.panel-header {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-weight: 600;
  color: #e6e9ef;
  border-bottom: 1px solid #1e222b;
}

.panel-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.property-content {
  color: #e6e9ef;
}

:deep(.el-descriptions__label) {
  color: #9aa3b2;
  font-weight: 500;
}

:deep(.el-descriptions__content) {
  color: #e6e9ef;
}
</style>

